<template>
  <div id="login" v-if="!isLogin" class="animated fadeIn">
    <Card>
      <p slot="title" class="login-form">登录</p>
      <p slot="title" class="changeForm" @click="registerForm">注册
        <Icon type="ios-redo-outline" size="20"></Icon>
      </p>
      <Form ref="loginFormValidate" :model="loginFormValidate" :rules="loginRuleValidate" :label-width="80">
        <Form-item label="用户名" prop="name">
          <Input v-model="loginFormValidate.name" icon="person" placeholder="请输入用户名"></Input>
        </Form-item>
        <Form-item label="密码" prop="password">
          <Input v-model="loginFormValidate.password" :icon="passwordVisible" placeholder="请输入密码"
                 :type="passwordInputType"
                 @on-click="changePasswordVisible"></Input>
        </Form-item>
        <Form-item>
          <Button type="primary" long @click="handleSubmit('loginFormValidate')">登录</Button>
        </Form-item>
      </Form>
    </Card>
  </div>
</template>

<script>
  import {mapActions, mapGetters} from 'vuex'
  export default {
    name: 'login',
    changing: false,
    data () {
      return {
        isLogin: false,
        txt: '',
        loginFormValidate: {
          name: '',
          password: ''
        },
        loginRuleValidate: {
          name: [
            {required: true, message: '姓名不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['passwordVisible', 'passwordInputType'])
    },
    methods: {
      ...mapActions(['changePasswordVisible']),
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!')
            this.$router.push('/index')
          } else {
            this.$Message.error('表单验证失败!')
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields()
      },
      registerForm () {
        this.$emit('changeForm', 'isLogin')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .ivu-card {
    width: 400px
    padding: 15px;
    margin: 50px auto;
  }

  .changeForm {
    float: right
    padding-right: 2px;
    display: inline-block;
    width: auto
    cursor: pointer
  }

  .login-form {
    display: inline-block;
    width: auto
  }

  .login {
    margin: 0 auto;
  }

  .changeForm:hover {
    color: #19be6b
    transition: All 0.2s ease-in-out;
    transform: scale(1.2)
    i {
      transition: All 0.5s ease-in-out;
      transform: scale(1.2) rotate(360deg)
    }
  }

</style>
